<template>
  <div class="attachment-thumbnail">

    <div slot="reference">
      <a @click="onlinePreView()" class="attachment-thumbnail-preview">
        <span class="attachment-thumbnail-preview-ext">{{getExtend()}}</span>
      </a>

      <p class="attachment-thumbnail-details">
        <a @click="onlinePreView()" class="attachment-thumbnail-name" :title="detaildata.fileFullName">
          {{detaildata.fileFullName}}
        </a>
        <span class="attachment-thumbnail-details-title-options">
                已上传{{detaildata.uploadTime|formatDate}}
                  <a @click="onlinePreView()">
                    <span class="attachment-thumbnail-details-options-item-text">预览</span>
                  </a>-<a :href="fileDownloadBaseUrl+'/planning/file/download/'+attachementId">
                    <span class="attachment-thumbnail-details-options-item-text">下载</span>
                  </a>
              </span>
      </p>
    </div>

    <el-dialog
      width="95%"
      top="5vh"
      custom-class="dialog-preview"
      :visible.sync="dialogVisible">
      <iframe :src="previewUrl" width="100%" height="100%"></iframe>
      <div class="dialog-preview-footer">
        <div class="dialog-preview-footer-title">{{detaildata.fileFullName}}</div>
        <div class="dialog-preview-footer-desc">已添加 {{detaildata.uploadTime|formatDate}} - {{detaildata.size}} KB</div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {getAttachmentDetail} from "@/api/attachment";
  import store from "@/store";
  import * as WebCtrl from "../../assets/WebOffice";

  export default {
    name: "preview",
    props: {
      attachementId: {
        type: Number,
        required: true
      },
    },
    data() {
      return {
        detaildata: {},
        dialogVisible: false,
        publicPath: process.env.BASE_URL,
        previewUrl: '',
        fileDownloadBaseUrl:window.location.protocol + '//' + window.location.host + process.env.VUE_APP_AXIOS_BASE_URL
      }
    },
    filters: {
      formatDate: function (value) {
        let date = new Date(value);
        let y = date.getFullYear();
        let MM = date.getMonth() + 1;
        MM = MM < 10 ? ('0' + MM) : MM;
        let d = date.getDate();
        d = d < 10 ? ('0' + d) : d;
        let h = date.getHours();
        h = h < 10 ? ('0' + h) : h;
        let m = date.getMinutes();
        m = m < 10 ? ('0' + m) : m;
        let s = date.getSeconds();
        s = s < 10 ? ('0' + s) : s;
        return  MM + '月' + d + '号 ' + h + '点' + m + '分';
      }
    },
    mounted(){
      this.getAttachmentDetail();
    },
    methods: {
      getAttachmentDetail() {
        getAttachmentDetail(this.attachementId).then(response => {
          if (response.data.code == 0) {
            this.detaildata = response.data.data
          }
        });
      },
      getExtend() {
        if(this.detaildata.extend!=undefined&&this.detaildata.extend!=null){
          return this.detaildata.extend.substr(1);
        }else {

        }
      },
      getPreviewUrl(){
        // let baseUrl = `${this.publicPath}filePreview/onlinePreview?url=`;
        // let downloadUrl = `http://${window.location.host}${this.publicPath}file/download/${this.attachementId}?access_token=${store.getters.access_token}&fullfilename=${this.detaildata.fileFullName}`;
        let fileFullName = this.detaildata.fileFullName;
        let previewPath = this.detaildata.previewPath;
        let preview = false;
        if(previewPath != null){
          fileFullName = fileFullName.split(".")[0] + ".pdf";
          preview = true;
        }
        let baseUrl = `/filePreview/onlinePreview?url=`;
        let downloadUrl = `${this.fileDownloadBaseUrl}/file/download/${this.attachementId}?preview=${preview}&access_token=${store.getters.access_token}&fullfilename=${fileFullName}`;
        return baseUrl+encodeURIComponent(downloadUrl);
      },
      // onlinePreView() {
      //     this.dialogVisible = true;
      //     this.previewUrl = this.getPreviewUrl();
      // },
      onlinePreView(){

        this.dialogVisible = true;
        this.previewUrl = this.getPreviewUrl();

      }
    }
  }
</script>

<style scoped>
  .attachment-thumbnail:hover .attachment-thumbnail-details {
    background-color: rgba(9,30,66,.04);
  }
  .attachment-thumbnail {
    border-radius: 3px;
    width: 340px;
    height: 55px;
    margin: 3px 3px;
    overflow: hidden;
    position: relative;
  }

  .attachment-thumbnail-preview {
    background-color: rgba(9, 30, 66, .04);
    background-position: 50%;
    background-size: contain;
    background-repeat: no-repeat;
    border-radius: 3px;
    height: 50px;
    margin-top: -25px;
    position: absolute;
    top: 50%;
    left: 0;
    text-align: center;
    text-decoration: none;
    z-index: 1;
    width: 60px;
  }

  .attachment-thumbnail-preview-ext {
    color: #5e6c84;
    display: block;
    font-size: 14px;
    font-weight: 700;
    height: 100%;
    line-height: 50px;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
    width: 100%;
  }

  .attachment-thumbnail-details {
    box-sizing: border-box;
    cursor: pointer;
    padding: 0px 0px 0px 68px;
    min-height: 50px;
    margin: 0;
    z-index: 0;
  }

  .attachment-thumbnail-name{
    margin: 4px 0px 0px 0px;
    font-weight: 700;
    display: block;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
  }

  .attachment-thumbnail-details-title-options {
    display: block;
    margin-bottom: 0px;
  }
  .attachment-thumbnail-details-options-item-text {
    text-decoration: underline;
  }
  .attachment-thumbnail-details-options-item-text:hover{
    color: black;
  }
  .dialog-preview-footer{
    text-align: center;
    position: fixed;
    bottom: 0;
    z-index: 3000;
    color: white;
    font-weight: bold;
    font-size: 20px;
    width: 95%;
    height: 8vh;
  }
  .dialog-preview-footer-title{
    color: white;
    font-weight: bold;
    font-size: 20px;
  }
  .dialog-preview-footer-desc{
    color: white;
    font-size: 14px;
    font-weight: normal;
    margin-top: 10px;
  }
</style>
